import * as React from 'react';
function GrandSon() {
  console.log('grandson render');
  return <div>I'm pure grandson!</div>;
}
const MemoGrandSon = React.memo(GrandSon);
function Child() {
  const [count, setCount] = React.useState(0);
  function increment() {
    setCount(count + 1);
  }
  console.log('child render');
  return (
    <div>
      {count}
      <button onClick={increment}>+</button>
      <MemoGrandSon />
    </div>
  );
}
function App() {
  const [count, setCount] = React.useState(0);
  React.useEffect(() => {
    setCount(1);
    setTimeout(() => {
      setCount(3);
    }, 3000);
    console.log('useEffect');
  }, []);
  console.log('render');
  function decrement() {
    setCount(count - 1);
  }
  return (
    <div>
      <Child />
      <p>{count}</p>
      <button onClick={decrement}>-</button>
    </div>
  );
}

// class App extends React.Component {
//   componentDidMount() {
//     console.log("componentDidMount")
//   }
//   render() {
//     return <div>class component</div>
//   }
// }

export default App;
